<template>
    <div class="page-content">
        <div class="comm-content" ref="box">种植面积</div>
    </div>
</template>
<script>
export default {
    data() {
        return {
            myEcharts: null
        }
    },
    destroyed() {
        window.removeEventListener('reset', this.screen)
    },

    computed: {
        themeStatus() {
            return this.$store.state.theme
        }
    },
    watch: {
        themeStatus() {
            console.log(this.$store.state.theme);
            this.myEcharts.dispose()
            this.initEcharts()
            this.screen()
        }
    },
    async mounted() {
       this.initEcharts()
    },
    methods: {
        async initEcharts() {
            window.addEventListener("resize", this.screen)
            let box = this.$refs.box
            this.myEcharts = this.$echarts.init(box,this.themeStatus)
            let dataList = await this.$http("/CropGrowthTrend")
            console.log(dataList);

            let options = {
                grid: {

                    y: 101,    //上下距离

                    y2: 36,

                    x2: 10,

                    height: "70%",
                },

                title: {
                    text: "主要地区农作物种植增长趋势",//标题内容
                    top: 10,
                    left: 10,
                   

                },

                // 滑入显示详情
                tooltip: {

                    // trigger: 'axis', 
                    axisPointer: {
                        // type: 'cross',
                        crossStyle: {
                            color: '#999'
                        },
                        lineStyle: {
                            type: 'dashed'
                        }
                    }
                },
                legend: {
                    // orient: 'horizontal',
                    icon: "circle",
                    show: true,
                    top: 40,
                    left: 0,
                    padding: [20, 20, 20, 20],
                    textStyle: {
                        color: "#fff"
                    }
                },
                xAxis: {
                    type: 'category',
                    data: dataList.data[0].content.map(item => item.month),
                    splitLine: {
                        show: false
                    },
                    axisTick: {
                        show: false
                    },
                    axisLine: {
                        show: false
                    },
                },
                yAxis: {

                    type: 'value',
                    axisLabel: {
                        color: '#999',
                        textStyle: {
                            fontSize: 12
                        },
                    },
                    splitLine: {
                        show: true,
                        lineStyle: {
                            color: '#F3F4F4',
                            type: 'dashed' // y轴分割线类型
                        }
                    },
                    axisTick: {
                        show: true
                    },
                    axisLine: {
                        show: true
                    },
                },
                series: dataList.data.map(item => {
                    return {
                        name: item.city,
                        type: 'line',
                        smooth: true,
                        symbol: 'none',
                        data: item.content.map(item => item.area)
                    }
                })
            };
            this.myEcharts.setOption(options)

        },
        screen() {
            this.myEcharts.resize()
            //计算一个文字大小比例
            let width = this.$refs.box.offsetWidth
            let num = width / 100 * 5
            let options = {
                title: {
                    textStyle: {
                        //设置主题样式
                        fontSize: num
                    }
                }
            }
            //修改之后要重绘
            this.myEcharts.setOption(options)
        }
    }


}
</script>
<style scoped></style>